<template>
  <div class="my-2">
    <div ref="gridRef" class="border-t text-gray-950">
      <div class="border-l border-b border-r px-2">
        <!-- 购销合同 -->
        <div class="text-center font-bold" style="font-size: 30px;">{{form.template_name}}</div>
        <div class="flex mt-2 mb-1">
          <div class="ml-auto w-1/4">合同编号: {{ form.value.contract_no }}</div>
        </div>
      </div>

      
      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center">甲方（买方）</div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
          <el-input v-if="edit" v-model="form.company_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.company_name }}</div>
        </div>
        <div class="col-span-3 border-b border-r p-2 flex flex-col justify-center">
          <div>地址</div>
          <div>电话</div>
        </div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
          <div>
            <el-input v-if="edit" v-model="form.address" placeholder="请输入" autosize />
            <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.address }}</div>
          </div>
          <div class="mt-1">
            <el-input v-if="edit" v-model="form.value.purchase_user_phone" placeholder="请输入" autosize />
            <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.purchase_user_phone }}</div>
          </div>
        </div>
        <div class="col-span-3 border-b border-r p-2 flex items-center">乙方（卖方）</div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
          <el-input v-if="edit" v-model="form.supplier_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.supplier_name }}</div>
        </div>
        <div class="col-span-3 border-b border-r p-2 flex flex-col justify-center">
          <div>地址</div>
          <div>电话</div>
        </div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
          <div>
            <el-input v-if="edit" v-model="form.value.company_address" placeholder="请输入" autosize />
            <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.company_address }}</div>
          </div>
          <div class="mt-1">
            <el-input v-if="edit" v-model="form.value.phone" placeholder="请输入" autosize />
            <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.value.phone }}</div>
          </div>
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-full border-b border-r p-2">甲乙双方依据《中华人民共和国合同法》等相关法律法规的规定，经友好协商，就乙方向甲方购买如下货物事宜，达成如下协议：</div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">采购单号</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">sku</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">开票名称</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">单位</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">数量</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">含税单价</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">含税金额</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">备注</div>
      </div>

      <div v-for="(d, i) in form.value.purchase_info" :key="i" class="grid border-l"
        style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.purchase_no }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.sku }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_name }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_unit }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.purchase_num }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.unit_price_tax }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.total_money }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.remark }}&nbsp;</div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="border-b border-r p-2 flex items-center justify-center" style="grid-column: span 15 / span 15;">合计金额
        </div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ form.value.total_money }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center box">{{ form.value.cn_total_money }}
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-full border-b border-r p-2 flex items-center justify-center">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.remark }}</div>
          <el-input v-else v-model="form.remark" placeholder="说明" type="textarea" autosize />
        </div>
      </div>

      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">甲方信息</div>
        <div class="col-span-7 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>

        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">乙方信息</div>
        <div class="col-span-7 border-b border-r p-2">
          <div>经办人签字: </div>
          <div>负责人签字: </div>
          <div>单位盖章: </div>
          <div>日期: </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  isLook: Boolean,
  edit: Boolean,
})
const emit = defineEmits(['update:modelValue', 'load'])
const form = computed({
  get() {
    return props.modelValue || {}
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

nextTick(() => {
  !props.edit && emit('load')
})
</script>